<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head lang="zh-CN">
    <base href="<%=basePath%>">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>修改授权人员信息</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
	<style type="text/css">
		.round {
		   padding:10px; width:300px; height:50px;
		   border: 0px solid #dedede;
		   -moz-border-radius: 5px;      /* Gecko browsers */
		   -webkit-border-radius: 5px;   /* Webkit browsers */
		   border-radius:5px;            /* W3C syntax */
		}
		#imghead2{
    		width:50px; 
	        height:50px; 
	        border-radius:200px; 
    	}
    	#imghead3{
    		width:50px; 
	        height:50px; 
	        border-radius:200px; 
    	}
	</style>
	<script type="text/javascript" src="jquery/1.9.1/jquery.min.js"></script> 
	<script type="text/javascript" src="layer/2.4/layer.js"></script>
	<script type="text/javascript">
		function homePage(){
			var moblie=document.getElementById("moblie").value;
			var yphone=document.getElementById("yphone").value;
			window.location.href="<%=path%>/p/success?userid="+moblie+"&yphone="+yphone;
		}
		
		function Determine(){
			var file=document.getElementById("filepath1").value;
			var nickname=document.getElementById("name").value;
			var name = /^[\u4E00-\u9FA5]{2,4}$/;
			
			if(file ==""){
				alert("请上传正面人脸图片");
			}else if(!name.test(nickname)){
				alert("请输入2-4位中文名称");
			}else{
				document.getElementById("imghead3").style.display="block";
  				document.getElementById("button").style.display="none";
				$("#form").submit();
			}
		}
		function family(){
  			document.getElementById("family").style.background='#27a2f0';
  			document.getElementById("friend").style.background='white';
  			document.getElementById("work").style.background='white';
  			document.getElementById("relationship").value="家人";
  		}
  		
  		function friend(){
  			document.getElementById("family").style.background='white';
  			document.getElementById("friend").style.background='#27a2f0';
  			document.getElementById("work").style.background='white';
  			document.getElementById("relationship").value="朋友";
  		}
  		function work(){
  			document.getElementById("family").style.background='white';
  			document.getElementById("friend").style.background='white';
  			document.getElementById("work").style.background='#27a2f0';
  			document.getElementById("relationship").value="工作";
  		}
		
		//人脸检测图片上传预览1
         function previewImage1(file){
         	var files = $("#filepath1").prop("files");
         	var formData =new FormData();
         	formData.append("file",files[0]);
         	var filepath1=document.getElementById('filepath1').value;		//获取文件路径
         	var newfilepath1 =filepath1.substring(filepath1.lastIndexOf('.'));
         	var jpg='.jpg',png='.png',jpeg='.jpeg',gif='.gif';
         	if(jpg == newfilepath1 || png==newfilepath1 || jpeg == newfilepath1 || gif==newfilepath1){
         		$.ajax({
  					url:"<%=path%>/face/detection",
  					fileElementId:"filepath1",
  					data:formData,
  					type:"post",
  					async:true,
  					processData:false,
  					contentType:false,
  					beforeSend:function(XMLHttpRequest){
  						document.getElementById("1").style.display="block";
  						document.getElementById("button").style.display="none";
	  				},
  					success:function(date){
  					document.getElementById("1").style.display="none";
  					document.getElementById("button").style.display="block";
  					var s=JSON.parse(date);
  					if(s=="413"){
  						alert("图片超出2BM");
  						document.getElementById('filepath1').value="";	//清除图片路径 */
  						var img=document.getElementById("imghead1");
  						img.src="<%=path%>/csh/image/920645047.jpg";
  						img.style.height="150px";
  						img.style.width="80%";
  					}else if(s=="0"){
  						alert("图片异常,请重试");
  						document.getElementById('filepath1').value="";	//清除图片路径 */
  						var img=document.getElementById("imghead1");
  						img.src="<%=path%>/csh/image/920645047.jpg";
  						img.style.height="150px";
  						img.style.width="80%";
  					}else if(s.error_message=="IMAGE_ERROR_UNSUPPORTED_FORMAT: image_file"){
  						alert("图像无法正确解析，有可能不是一个图像文件、或有数据破损、或图片文件格式不符合要求");
  						document.getElementById('filepath1').value="";	//清除图片路径 */
  						var img=document.getElementById("imghead1");
  						img.src="<%=path%>/csh/image/920645047.jpg";
  						img.style.height="150px";
  						img.style.width="80%";
  					}else if(s.error_message=="INVALID_IMAGE_SIZE: image_file"){
  						alert("图片尺寸错误,图片太大或太小");
  						document.getElementById('filepath1').value="";	//清除图片路径 */
  						var img=document.getElementById("imghead1");
  						img.src="<%=path%>/csh/image/920645047.jpg";
  						img.style.height="150px";
  						img.style.width="80%";
  					}else if(s.error_message=="INVALID_IMAGE_URL"){
  						alert("无法从指定的路径下载图片，图片路径错误或者无效");
  						document.getElementById('filepath1').value="";	//清除图片路径 */
  						var img=document.getElementById("imghead1");
  						img.src="<%=path%>/csh/image/920645047.jpg";
  						img.style.height="150px";
  						img.style.width="80%";
  					}else if(s.error_message=="IMAGE_FILE_TOO_LARGE: image_file"){
  						alert("图片文件过大,请将图片文件大小控制在 2MB 内");
  						document.getElementById('filepath1').value="";	//清除图片路径 */
  						var img=document.getElementById("imghead1");
  						img.src="<%=path%>/csh/image/920645047.jpg";
  						img.style.height="150px";
  						img.style.width="80%";
  					}else if(s.error_message=="IMAGE_DOWNLOAD_TIMEOUT"){
  						alert("下载图片超时");
  						document.getElementById('filepath1').value="";	//清除图片路径 */
  						var img=document.getElementById("imghead1");
  						img.src="<%=path%>/csh/image/920645047.jpg";
  						img.style.height="150px";
  						img.style.width="80%";
  					}else if(s.error_message=="CONCURRENCY_LIMIT_EXCEEDED"){
  						alert("并发数超过限制,请稍后重试");
  						document.getElementById('filepath1').value="";	//清除图片路径 */
  						var img=document.getElementById("imghead1");
  						img.src="<%=path%>/csh/image/920645047.jpg";
  						img.style.height="150px";
  						img.style.width="80%";
  					}else if(s.error_message=="INTERNAL_ERROR"){
  						alert("服务器内部错误");
  						document.getElementById('filepath1').value="";	//清除图片路径 */
  						var img=document.getElementById("imghead1");
  						img.src="<%=path%>/csh/image/920645047.jpg";
  						img.style.height="150px";
  						img.style.width="80%";
  					}else if(s.faces.length == 0 ){
  						alert("未检测到人脸,请重新选择一张图片,并确保人脸正对画面");
  						document.getElementById('filepath1').value="";	//清除图片路径 */
  						var img=document.getElementById("imghead1");
  						img.src="<%=path%>/csh/image/920645047.jpg";
  						img.style.height="150px";
  						img.style.width="80%";
  					}else if(s.faces.length>1){
  						alert("图片中不能超过两张头像");
  						document.getElementById('filepath1').value="";	//清除图片路径 */
  						var img=document.getElementById("imghead1");
  						img.src="<%=path%>/csh/image/920645047.jpg";
  						img.style.height="150px";
  						img.style.width="80%";
  					}else if(s.faces.length == 1){
			          	var div = document.getElementById('preview1');
			          	document.getElementById('width').value=s.faces[0].face_rectangle.width;
			          	document.getElementById('height').value=s.faces[0].face_rectangle.height;
			          	document.getElementById('top').value=s.faces[0].face_rectangle.top;
			          	document.getElementById('left').value=s.faces[0].face_rectangle.left;	
			          	if (file.files && file.files[0]){
				            div.innerHTML ='<img id=imghead1>';
				            var img = document.getElementById('imghead1');
				            img.onload = function(){
			                var rect = clacImgZoomParam(150, 150, img.offsetWidth, img.offsetHeight);
			                img.width  =  rect.width;
			                img.height =  rect.height;
			                img.style.marginTop = rect.top+'px';
			           	};
				            var reader = new FileReader();
				            reader.onload = function(evt){
				            img.src = evt.target.result;
				        };
				            reader.readAsDataURL(file.files[0]);
			          	}else{//兼容IE
				            file.select();
				            var src = document.selection.createRange().text;
				            div.innerHTML = '<img id=imghead>';
				            var img = document.getElementById('imghead');
				            img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
				            var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
				            status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
				            div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
			          	}	
  					}
  					},
  					error:function(date){
  					alert("图片异常");
  					document.getElementById('filepath1').value="";
	         		var img=document.getElementById("imghead1");
	  				img.src="<%=path%>/csh/image/920645047.jpg";
	  				img.style.height="150px";
	  				img.style.width="80%";
  				}
  			});  
         	}else{
         		alert("不是图片");
         		document.getElementById('filepath1').value="";
         		var img=document.getElementById("imghead1");
  				img.src="<%=path%>/csh/image/920645047.jpg";
  				img.style.height="150px";
  				img.style.width="80%";
         	}
        }
	
		function clacImgZoomParam( maxWidth, maxHeight, width, height ){
            var param = {top:0, left:0, width:width, height:height};
            if( width>maxWidth || height>maxHeight ){
                rateWidth = width / maxWidth;
                rateHeight = height / maxHeight;
                if( rateWidth > rateHeight ){
                    param.width =  maxWidth;
                    param.height = Math.round(height / rateWidth);
                }else{
                    param.width = Math.round(width / rateHeight);
                    param.height = maxHeight;
                }
            }
            param.left = Math.round((maxWidth - param.width) / 2);
            param.top = Math.round((maxHeight - param.height) / 2);
            return param;
        }
	</script>
  </head>
  <body>
  	<div class="container-fluid">
      <div class="row">
      	<form id="form" action="<%=path%>/v/update" method="post" enctype="multipart/form-data">
      		<input type="hidden" id="moblie" name="moblie" value="${visitors.userid}">
      		<input type="hidden" id="yphone" name="yphone" value="${yphone}">
      		<input type="hidden" name="yid" value="${visitors.yid}">
     	<table border="0px solid red" width="100%" height="100%">
     		<%-- <tr height="8%">
     			<td style="width: 50px; background-color:#373a3b;" align="center"><img alt="" src="<%=path%>/csh/image/return.jpg" onclick="homePage()" style="width: 30px; height: 20px;"></td>
     			<td style="width: 950px; background-color:#373a3b; color: white;" align="center">修改授权人员信息</td>
     		</tr> --%>
     		<tr height="25%">
     			<td colspan="2" align="center">
     				<div style="text-align: center;">
			    		<label>
			   		 		<input type="file"  name="filepath" id="filepath1"  value="" onchange="previewImage1(this)" style="display: none;" />
						    <div id="preview1" style="border: 0px solid red; overflow: hidden; position: relative; display: inline-block; width: 100%; height: 100%;">
							    <img id="imghead1" src="<%=path%>/csh/image/920645047.jpg" width="80%" height="150px">
						    </div>
						</label>
    				</div>
     			</td>
     		</tr> 
     		<tr height="5%">
     			<td colspan="2" align="center">
	   			 	<span id="1"  style="display:none ;">
	   					 <img id="imghead2" src="http://wwl.ycws.cc/image/backgroundimage/2.gif" >
	   				</span>
     			</td>
     		</tr>
     		<tr height="5%">
     			<td style="width: 100px; background-color:#edeff0;" align="center"><img alt="" src="<%=path%>/csh/image/e.jpg" style="width: 20px; height: 20px;"></td>
     			<td style="width: 850px; background-color:#edeff0; color: #7f8081;" align="left">请参照下列图片上传个人正面照</td>
     		</tr>
     		<tr height="20%">
     			<td colspan="2" align="center">
     				<img alt="" src="<%=path%>/csh/image/girl.jpg" style="height: 130px; width: 170px;">&nbsp;<img alt="" src="<%=path%>/csh/image/boy.jpg" style="height: 130px; width: 170px;">
     			</td>
     		</tr>
     		<tr height="5%">
     			<td colspan="2">
     				<div style="border: px #f3f3f3 solid; width: 90%;  margin-left: 5%; height: 100%;" >
	     				<div style="float: left; border: px red solid; width: 15%; height:100%; text-align: center; padding-top: 5px; font-size: 14px;">昵称</div>
	     				<div style="float: left; border: px red solid; width: 75%; height:100%; font-size: 16px; padding-top: 5px;">
	     				<input type="text" name="name" id="name" style="width: 100%; font-size: 14px; padding-left: 5px;" value="${visitors.yname}"></div>
     				</div>
     			</td>
     		</tr>
     		<tr height="5%">
     			<td colspan="2" >
     				<div style="border: 0px #f3f3f3 solid; width: 100%; height: 100%;" >
	     				<div style="float: left; border: 0px red solid; width: 25%; height:100%; text-align: center; background-color:#edeff0; font-size: 14px;">选择分组</div>
	     				<div style="float: left; border: 0px red solid; width: 75%; height:100%; font-size: 16px; background-color:#edeff0;"></div>
     				</div>
     			</td>
     		</tr>
     		<tr height="15%">
     			<td colspan="3" align="center">
     				<input type="hidden" name="relationship" value="家人" id="relationship">
   					<a style="border: 1px solid gray; padding: 3px 10px 3px 10px; font-size: 18px; text-decoration: none; color: black; background-color:#27a2f0; " class="round" onclick="family()" id="family"><font style="font-size: 15px;">家人</font></a>&nbsp;&nbsp;&nbsp;
	    			<a style="border: 1px solid gray; padding: 3px 10px 3px 10px; font-size: 18px; text-decoration: none; color: black;" class="round" onclick="friend()" id="friend"><font style="font-size: 15px;">朋友</font></a>&nbsp;&nbsp;&nbsp;
	    			<a style="border: 1px solid gray; padding: 3px 10px 3px 10px; font-size: 18px; text-decoration: none; color: black;" class="round" onclick="work()" id="work"><font style="font-size: 15px;">工作</font></a>&nbsp;&nbsp;&nbsp;
     			</td>
     		</tr>
     		<tr height="20%" style="background-color:#edeff0;">
     			<td colspan="2" align="center" style="background-color:withe;"><div id="button" style="height: 50px; width: 250px; display:block; background-color: #49a1f2; color: white; font-size: 16px;" class="round" onclick="Determine()">确定</div>
     			<img id="imghead3" style="display: none;" src="http://wwl.ycws.cc/image/backgroundimage/2.gif" >
     			</td>
     		</tr>
     	</table>
     		<input type="hidden" name="width" id="width" value=""><br>
	     	<input type="hidden" name="height" id="height" value=""><br>
	     	<input type="hidden" name="top" id="top" value=""><br>
	     	<input type="hidden" name="left" id="left" value=""><br>
     	</form>
      </div>
    </div>
  </body>
</html>
